<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
	</style>
	<body>
		<canvas id="shuwon" style="background: #000000;"></canvas>
	</body>
</html>
<script src="js/utils.js"></script>
<script src="js/ball3D.js"></script>
<script>

	window.onload = function(){
		var canvas = document.getElementById('shuwon');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		mouse = utils.captureMouse(canvas);
		var ctx = canvas.getContext('2d');
		var centerX = canvas.width/2;
		var centerY = canvas.height/2;
		var balls = [];
		var ballNum = 200;
		var angleX = 0;
		var angleY = 0;
		var fl = 250;
		
		for (var i = 0; i < ballNum; i++) {
			var ball = new Ball(Math.random() * 5 + 3);
			ball.xpos = Math.random() * 500 - 250;
			ball.ypos = Math.random() * 500 - 250;
			ball.zpos = Math.random() * 500 - 250;
			balls.push(ball);
		}
		
		
		function rotateY(ball, angle){

			 var cos = Math.cos(angle),
                    sin = Math.sin(angle),
                    x1 = ball.xpos*cos - ball.zpos*sin,
                    z1 = ball.zpos*cos + ball.xpos*sin;
                
                ball.xpos = x1;
                ball.zpos = z1;

		}
		
		function rotateX(ball, angle){
			
			var cos = Math.cos(angle),
                    sin = Math.sin(angle),
                    y1 = ball.ypos*cos - ball.zpos*sin,
                    z1 = ball.zpos*cos + ball.ypos*sin;
                    
                ball.ypos = y1;
                ball.zpos = z1;

		}
		
		
		function move(ball){
			rotateX(ball, angleX);
			rotateY(ball, angleY);
			setPerspective(ball);
		}
		
		function draw(ball){
                if(ball.visible){
                    ball.draw(ctx);
                }
            }
		
		function setPerspective(ball){
			if(ball.zpos > -fl){
                    var scale = fl/(fl + ball.zpos);
                    ball.scaleX = ball.scaleY = scale;
                    ball.x = centerX + ball.xpos * scale;
                    ball.y = centerY + ball.ypos * scale;
                    ball.visible = true;
                }else{
                    ball.visible = false;
                }
		}
		
		

		
		(function enterFrame(){
			window.requestAnimationFrame(enterFrame, canvas);
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			angleX = (mouse.y - centerY) * 0.0001;
            angleY = (mouse.x - centerX) * 0.0001;
			
			balls.forEach(draw);
			balls.forEach(move);
		}())		
	}

</script>